<template>
  <div class="myInputSearch">
    <!-- <el-input placeholder="请输入内容" v-model="input3" class="input-with-select" clearable>
      <el-button slot="append" icon="el-icon-search" @click="handleClick"></el-button>
    </el-input> -->
    <div class="myInput">
      <el-input v-model="input3" placeholder="请输入内容" clearable></el-input>
      <div class="searchIcon" @click="handleClick"></div>
      <!-- <div class="searchClear" @click="handleClearClick"></div> -->
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
  },
  data() {
    return {
      input3: ''
    };
  },
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    handleClick() {
      this.$emit("handleChangeInputSearch",this.input3)
    },
    handleClearClick() {
      this.input3 = ""
    }
  }
};
</script>
<style lang="scss" scoped>
// .el-select .el-input {
//     width: 130px;
//   }
//   .input-with-select .el-input-group__prepend {
//     background-color: #fff;
//   }
.myInputSearch{
  .myInput{
    width: 280px;
    height: 34px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0px 0px 5px rgba(0,0,0,.2);
    background: #fff;
    font-size: 8px;
    line-height: 32px;

    .searchIcon{
      float: left;
      height: 28px;
      width: 36px;
      margin-top: 2px;
      background: url("../../../assets/info_images/search.png") no-repeat center center;
      background-size: 16px 16px;
      cursor: pointer;
      border-right: 1px solid #ccc;
    }
    
    .searchClear{
      float: left;
      width: 36px;
      height: 32px;
      background: url("../../../assets/info_images/searchClear.png") no-repeat center center;
      background-size: 16px 16px;
      cursor: pointer;
    }
  }
}
</style>
<style lang="scss">
.myInputSearch{
  .myInput{
    .el-input{
      float: left;
      width: 242px !important;
      border: none!important;
      font-size: 12px;
      padding-left: 12px;
      font-family:  pingfang, "PingFang SC", sans-serif, Helvetica Neue, Helvetica, Hiragino Sans GB, Microsoft YaHei, Arial;;
      .el-input__inner{
        height: 32px!important;
        line-height: 32px !important;
        padding: 0 2px 0 4px !important;
        border: none!important;
        caret-color: #c4c7cf;
      }
    }
  }
}
</style>
